<template>
  <div class="authority-config-container">
    <div
      class="table-box"
      ref="tabBox"
    >
      <el-table
        :data="tableData"
        :height="tableHeight"
      >
        <el-table-column
          label="序号"
          type="index"
          :index="columnIndex"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="chName"
          label="应用名称"
        >
        </el-table-column>
        <el-table-column
          prop="platformType"
          label="应用类型"
        >
          <template slot-scope="scope">
            {{ handleType(scope.row.platformType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="应用状态"
        >
          <template slot-scope="scope">
            {{ handleStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updatedAt"
          label="更新时间"
        >
          <template slot-scope="scope">
            {{ handleTime(scope.row.updatedAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              class="operate-btn"
              @click="configFn(scope.row)"
            >配置权限</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <CommonPagination
      :options="paginationOptions"
      :dataSource="getListData"
    ></CommonPagination>
  </div>
</template>

<script>
import _ from 'lodash';
import CommonPagination from '@/components/CommonPagination.vue';
import { serviceList } from '@/api/authority.js';

export default {
  name: 'AuthorityConfig',
  components: {
    CommonPagination
  },
  data() {
    return {
      tableData: [],
      tableHeight: 500,
      paginationOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        pagerCount: 5,
        isShow: true,
        isDisabled: false
      }
    };
  },
  created() {
    this.getListData();
  },
  mounted() {
    this.$nextTick(() => {
      this.setTableHeight();

      // 监听窗口大小变化
      window.onresize = () => {
        this.setTableHeight();
      };
    });
  },
  methods: {
    // 获取应用列表
    getListData() {
      serviceList().then(res => {
        let data = res.data || [];
        this.paginationOptions.total = data.length;
        let filterData = _.cloneDeep(data);
        let { currentPage, pageSize } = this.paginationOptions;
        let startIndex = (currentPage - 1) * pageSize;
        filterData = filterData.splice(startIndex, pageSize);
        this.tableData = filterData;
      });
    },
    // 处理列表序号
    columnIndex(index) {
      let { currentPage, pageSize } = this.paginationOptions;
      let colIndex = index + (currentPage - 1) * pageSize + 1;
      return colIndex;
    },
    // 设置表格高度
    setTableHeight() {
      let tabBoxHeight = this.$refs.tabBox.offsetHeight;
      this.tableHeight = tabBoxHeight - 20;
    },
    // 配置权限
    configFn(item) {
      this.$router.push({
        name: 'authorityConfigDetails',
        query: {
          id: item.id,
          chName: item.chName,
          type: item.platformType
        }
      });
    },
    // 处理应用类型
    handleType(type) {
      let obj = {
        1: 'PC/APP',
        2: 'PC',
        3: 'APP'
      };
      return obj[type];
    },
    // 处理应用状态
    handleStatus(status) {
      let obj = {
        1: '未发布',
        2: '已发布',
        3: '已下线'
      };
      return obj[status];
    },
    // 处理更新时间
    handleTime(time) {
      return time ? time.substr(0, 19).replace('T', ' ') : '';
    }
  },
  beforeDestroy() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
.authority-config-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .operate-btn {
    color: var(--color-primary);
    cursor: pointer;
  }
}
</style>
